<template  #header>
  <el-tabs type="border-card" v-model="activeName" :before-leave="changeTab">
    <el-tab-pane label="订单信息" name="orderManage">
      <template>
        <div class="card-header">
          <span>订单-制单</span>
        </div>
      </template>
      <el-row :gutter="10">
         <el-input placeholder="搜索编号或客户名称"   style="width: 180px;margin-right:10px;"   v-model="searchContent" ></el-input> 
       
          <el-button size="small" type="primary" @click="handlerSearch">搜索</el-button>
        
      </el-row>
      <el-table
        :data="tableData"
        style="width: 100%"
        highlight-current-row
        row-key="id"
        @row-dblclick="showOrderDetail"
        @current-change="currentRowSelect"
       
      >
        <el-table-column prop="orderNo" label="订单编号" />
        <el-table-column prop="customerName" label="客户名称" />
      
        <el-table-column prop="orderStatus" label="订单状态">
          <template #default="scope">
            <el-tag v-if="scope.row.orderStatus == 0">{{
              orderStatusList[scope.row.orderStatus].label
            }}</el-tag>
            <el-tag type="warning" v-else-if="scope.row.orderStatus == 1">{{
              orderStatusList[scope.row.orderStatus].label
            }}</el-tag>
            <el-tag type="success" v-else-if="scope.row.orderStatus == 2">{{
              orderStatusList[scope.row.orderStatus].label
            }}</el-tag>
            <el-tag type="danger" v-else>{{
              orderStatusList[scope.row.orderStatus].label
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="订单类型" > <template #default="scope">{{orderTypeList[scope.row.orderType].label}}</template></el-table-column>
         <el-table-column prop="businessName" label="业务员" />
          <el-table-column prop="orderDate" label="下单日期" />
        <el-table-column prop="reviewerName" label="审核人" width="150">
            <template #default="scope">
              {{scope.row.reviewerName}}<el-button v-if="scope.row.orderStatus == 0" @click="submitOrder(scope.row)" size="mini" style="margin-left:10px;" type="primary">提交</el-button>
            </template>
          </el-table-column>
        <el-table-column prop="orderVerify" label="审核日期" />
        <el-table-column prop="deposit" label="定金" />
        <!-- <el-table-column prop="depositer" label="定金收款人" /> -->
         <el-table-column prop="sumPrice" label="税价合计" />
            <!-- <el-table-column prop="deliveryType" label="发货方式" />
        <el-table-column prop="logistics" label="物流/快递编号" />
         <el-table-column prop="installer" label="安装人员" /> -->
        <el-table-column prop="createDate" label="创建时间" /> 
        <el-table-column label="操作" width="105"  >
          <template #default="scope" >
             <el-button
              size="mini"
               v-if="scope.row.orderStatus == 2"
              @click="showCheckDialog(scope.$index, scope.row)"
              type="primary" >财务核单</el-button> 

             <el-tooltip content="制单" placement="top" v-if="scope.row.orderStatus == 4">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-printer"
              circle
              @click="printOrderPreview(scope.row)"
            ></el-button></el-tooltip>
           </template>
           </el-table-column>
      </el-table>
      <el-pagination
        style="float: right; margin-top: 10px"
        :currentPage="currentPage"
        :page-size="10"
        :page-sizes="[10, 20, 100, 500]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
  
      <CheckOrder :checkOrderId="id" v-if="checkOrderVisible === true" :checkOrderVisible="checkOrderVisible" @OnCloseCheckDialog="closeCheckDialog"></CheckOrder> 
    </el-tab-pane>

    <el-tab-pane label="订单细项" name="orderDetailManage">
     
     
       <el-table :data="orderDetailData"  highlight-current-row
        row-key="id" style="width: 100%">
        <el-table-column prop="product.name" label="订购商品" />
        <el-table-column prop="product.code" label="订购商品" />
        <el-table-column prop="product.unitName" label="订购商品" />
         <el-table-column prop="orderCount" label="订购数量" />
         <el-table-column prop="actualCount" label="出货数量" />
        <el-table-column prop="price" label="单价" />
         <el-table-column prop="amountPrice" label="金额" />
         <el-table-column prop="shipper" label="出货人" />
         <el-table-column prop="shipperTime" label="出货时间" />
        
      </el-table>  
     
    </el-tab-pane>
 <el-tab-pane label="销售订单预览" name="orderReviewManage">
     <el-row><el-col :span="10"><el-button size="small" type="primary" @click="printOrder">打印</el-button></el-col></el-row>
        
        <el-card  id="printMe">
        <el-row><el-col :span="24" style="font-size:20px;text-align:center;">销售订单</el-col></el-row>
        <el-row><el-col :span="12">订单编号：{{orderInfo.orderNo}}</el-col><el-col :span="12">打印次数：</el-col></el-row>
         <el-row>
            <el-col :span="6">订单类型：{{orderType}}</el-col>
             <el-col :span="6">交货方式：发货</el-col>
              <el-col :span="6">结算方式：现金</el-col>
             <el-col :span="6">币别：人民币</el-col>
        </el-row>
         <el-row>
            
              
             <el-col :span="6">下单日期：{{orderInfo.orderDate}}</el-col>
              <el-col :span="6">购销范围：购销</el-col>
              <el-col :span="6">已付定金：{{orderInfo.deposit}}</el-col>
            <el-col :span="6">汇率：1.00</el-col>
        </el-row>
        
        <el-row>
             <el-col :span="
             
             12">客户姓名：{{orderInfo.customerInfo.name}}</el-col><el-col :span="12">客户电话：{{orderInfo.customerInfo.phone}}</el-col>
        </el-row>
        <el-row>
              <el-col :span="24">交货地点：{{orderInfo.customerInfo.address}}</el-col>
        </el-row>


        <table class="dataintable">
          <tr><th>序号</th><th>商品名称</th> <th>规格</th><th>单位</th> <th>数量</th><th>含税单价</th><th>税率(%)
            </th><th>价税合计</th><th>备注</th></tr>
          <tr v-for="(detail,index) in orderDetailData" :key="detail.id" >
            <td>{{index}}</td>
             <td>{{detail.product.name}}</td>
          
           <td>{{detail.product.code}}</td>
            <td>{{detail.product.unitName}}</td>
             <td>{{detail.orderCount}}</td>
              <td>{{detail.price}}</td>
               <td>{{detail.product.taxRate}}</td>
                <td>{{detail.amountPrice}}</td>
                 <td>{{detail.remark}}</td>
                 </tr>

        </table>

       
          <!-- <el-row>
             <el-col :span="12">制表单位：</el-col><el-col :span="12">转物流发货：N</el-col>
        </el-row> -->
         <el-row>
             <el-col :span="8">财务审核：{{orderInfo.auditing.adminName}}</el-col>
             <el-col :span="8">审核日期：{{orderInfo.auditing.createDate}}</el-col>
              <el-col :span="8">部门：河北超平</el-col>
               </el-row>
               <el-row>
             <el-col :span="8">业务员：{{orderInfo.businessName}}</el-col>
              <el-col :span="8">主管审核：{{orderInfo.reviewerName}}</el-col>
               <el-col :span="8">制单：{{userinfo.name}}</el-col>
        </el-row>
        </el-card>
 </el-tab-pane>
 

  </el-tabs>
</template>

<script>
import { reactive, toRefs, onMounted, computed } from "vue";
 
import {
 
  useHandleSizeChange,
  useHandleCurrentChange,
  useHandlerSearch,
  loadData,
  getRequest,
  postRequest
} from "../../utils/api";
import { ElMessage  } from "element-plus";
 
import VueHtmlToPaper from "../../utils/vue-html-to-paper";
import CheckOrder from "../../components/ord/CheckOrder.vue";
export default {
  name: "SysOrder",
  components: {
    CheckOrder
},

  setup(props, { emit }) {
    const baseUrl = "/order/basic/printOrderList";
    const state = reactive({
      checkOrderVisible:false ,
       userinfo: JSON.parse(window.sessionStorage.getItem("user")),
      orderStatusList: [
        {value: 0,label: "待提交"},
        {value: 1,label: "待审核"},
        {value: 2,label: "审核通过"},
        {value: 3,label: "审核不通过"},
        {value: 4,label: "制单"},
        {value: 5,label: "待发货"},
        {value: 6,label: "安装调试完毕"},
        {value:7,label: "待收尾款"},
         {value:8,label: "订单完成"}
        
      ],orderTypeList:[ {value: 0,label: "直销"},
        {value: 1,label: "维修"},
        {value: 2,label: "调换"},
         {value: 3,label: "补发"}],
      
      searchContent: "",
      tableData: [],
      
      orderDetailData: [],
    
      total: 0,
      pageSize: 10,
      currentPage: 1,
      id: "",
      baseUrl,
      orderName: "",
      activeName: "orderManage",
      orderInfo:{
          customerInfo:{name:'',phone:"",address:''},
          orderType:0,
          auditing:{
            adminName:'',
            createDate:''
          }
      },
      orderType:computed(()=>{
        let {label} = state.orderTypeList[state.orderInfo.orderType];
          return label;
        })
    });

    const showOrderDetail = (row, column, event) => {
      state.activeName = "orderDetailManage";
      state.id = row.id;
      state.orderInfo = row ;
      
    };
  //加载订单细项数据
    const loadOrderDetailData = () => {
      getRequest("/order/basic/detail/", { id: state.id }).then(
        (response) => {
          if (response) {
            state.orderDetailData = response.data;
          }
        }
      );
    };
 

    const currentChange = (pageNo) => {
      state.currentPage = pageNo;
      loadData(state, state.baseUrl);
      state.orderDetailData=[];
      state.id='';
    };
 


    const currentRowSelect = (currentRow, oldCurrentRow) => {
        state.id = currentRow.id;
        state.orderInfo = currentRow ;
    };

    

  
  const options = {
  name: '_blank',
  specs: [
    'fullscreen=yes',
    'titlebar=yes',
    'scrollbars=yes'
  ],
  styles: [
     '/css/mytable.css',
     '/css/index.css'
  ],
  timeout: 1000, // default timeout before the print window appears
  autoClose: true, // if false, the window will not close after printing
  windowTitle: window.document.title, // override the window title
}

    const   printOrder = () => {
      // Pass the element id here
      //记录打印次数 和 待发货
      if(state.orderInfo.id){
        VueHtmlToPaper('printMe',options);
        postRequest("/order/basic/doPrint?id="+state.orderInfo.id).then(
        (response) => {
          if (response) {
            ElMessage.success("操作成功！")
           // state.orderDetailData = response.data;
          }
        }
      );
      }
       


    }
 
    const changeTab = (activeName, oldActiveName) => {
      return new Promise((resolve, reject) => {
        if (activeName == "orderDetailManage") {
          if (state.id) {
            loadOrderDetailData();
            return resolve();
          } else {
            ElMessage.error("请选中某一行订单信息！");
            return reject();
          }
        }else if(activeName == "orderReviewManage"){
            if (state.id) {
            loadOrderDetailData();
            return resolve();
          } else {
            ElMessage.error("请选中某一行订单信息！");
            return reject();
          }
          
        }else{
            return resolve();
        }
       
      });
    };
 

    const printOrderPreview = (currentRow)=>{
        state.id = currentRow.id ;
         state.orderInfo = currentRow ;
        state.activeName = "orderReviewManage";
    }

    
    

    const closeCheckDialog = (data)=>{
      state.checkOrderVisible = false ;
      
      if(data){
       
        loadData(state, state.baseUrl);
         state.orderDetailData=[];
         state.id='';
      }
    }

    const showCheckDialog = (index ,row)=>{
       state.checkOrderVisible = true ;
       state.id = row.id ;
     
    }

    onMounted(() => {
     loadData(state, state.baseUrl);
    });
    return {
      closeCheckDialog,
      showCheckDialog,
       
      ...toRefs(state), //解构响应式数据
      ...useHandlerSearch(state, baseUrl),
      ...useHandleSizeChange(state, baseUrl),
      ...useHandleCurrentChange(state, baseUrl),
      currentChange,
      currentRowSelect,
      changeTab,
      showOrderDetail,printOrder,
     printOrderPreview
  
      
    };
  },
};
</script>
<style scoped>

table.dataintable {
  margin-top:15px;
  border-collapse:collapse;
  border:1px solid #aaa;
  width:100%;
}

table.dataintable th {
  vertical-align:baseline;
  padding:5px 0px;
 
  border:1px solid #3F3F3F;
  text-align:center;
  color:#3F3F3F;
}

table.dataintable td {
  vertical-align:text-top;
  padding:5px 0px;
   text-align:center;
  border:1px solid #aaa;
}

table.dataintable tr:nth-child(odd) {
  background-color:#F5F5F5;
}

table.dataintable tr:nth-child(even) {
  background-color:#fff;
}


 
</style>